<script>
		var customerId = "<{$customerId}>";
</script>
<script type="text/javascript" SRC="/js/swfobject.js"></script>
<script type="text/javascript" SRC="/js/jquery.uploadify.min.js"></script>
<script type="text/javascript" SRC="/js/jquery-ui.js"></script>
<script type="text/javascript" SRC="/js/product.picture.upload.js"></script>
<link rel="stylesheet" href="/css/uploadify.css" type="text/css" />
<link rel="stylesheet" href="/css/blitzer/jquery-ui.css" type="text/css" />
<style>
	
	.width10{
		width:10%;
	}
	.requierd{
		margin-left:20px;
		color:red;
	}
    .mybtn{
		border:1px solid #FFAE56;
		cursor: pointer;
		background: url('/images/blue-gradient.png') repeat-x ;
		height:30px;
		margin:10px 0;
		border-radius: 5px;
    }
	.mybtn:hover{
        background:#fd8419;
    }
	.myspan{
		color:#fff;
		font-size:15px;  
		font-weight:bold ;
    }
	
</style>
<script>
	$(function(){
		$.post('/merchant/product/get-option-choose','',function(data){
				var html = '<div class="row height25"><div class="cell per10">Choice</div><div class="cell per25">Option Name</div><div class="cell per55">Option Value</div><div class="cellOther per10">Action</div></div>';
				$.each(data,function(k,v){
					html += '<div class="row height25 option'+v.poc_id+'"><div class="cell per10"><input id="'+v.poc_id+'" type="checkbox" value="'+v.poc_id+'" class="pocidCheckbox" name="pocid['+v.poc_id+']" onclick="showinput(this)" style="margin-top:6px;"></div><div class="cell per25"><input type="hidden" name="poid" value="'+v.po_id+'">'+v.poc_value+'</div><div class="cell per55"><input class="opvalueClass'+v.poc_id+'" name="opvalue['+v.poc_id+'][]" type="text" readonly="true" style="border:none; background:#FFF8DB;width:98%;height:17px; margin-top:3px;"></div><div class="cellOther per10 aClass'+v.poc_id+'" style="padding-top:7px; display:none;"><a href="javascript:void(0)" onclick="addOptionValue(this,'+v.poc_id+')"><img src="/images/ico-1.gif"/></a></div></div>';	
				});
				$('.qc_items').html(html);
			},'json');
			
		$("#qcItemCheck,#messageDiv").dialog({
			autoOpen : false,
			width : 500,
			modal : true,
			show : "slide",	
			buttons : {
				'Close' : function(){ $(this).dialog('close');}
			}
		});
		$("#messageSuccessDiv").dialog({
			autoOpen : false,
			width : 500,
			modal : true,
			show : "slide",	
			buttons : {
				'Close' : function(){ 
					$(this).dialog('close');
					window.location = '/merchant/product/create';
				
				}
			}
		});
		$("#batchAdd").dialog({
				autoOpen : false,
				width : 500,
				modal : true,
				show : "slide",
				buttons : {
					'Submit' : function() {
						if($('[name=productFile]').val()==""){
							$(".batchAddTips").html("Please select the file.");
						}else{
							$("#batchAddBtn").click();							
						}
					},
					'Close' : function() {
						$(this).dialog('close');
					}
				}
			});
			
		$("#addLinkPictureDialog").dialog({
			autoOpen:false,
			modal:true
		});
		$(".addLinkPicture").live("click",function(){
			var html = '<div><div>URL:<input type="text" class="linkUrl"/><span class="delUrlInput"><img src="/images/minus_sign.gif" /></span></div><div class="addUrlInput"><img src="/images/plus_sign.gif"/><input type="button" value="Add" class="addUrl"/></div></div>'
			$("#addLinkPictureDialog").html(html);
			$("#addLinkPictureDialog").dialog("open");
		});
		$(".addUrlInput").live("click",function(){
			var html ='<div>URL:<input type="text" class="linkUrl"/><span class="delUrlInput"><img src="/images/minus_sign.gif"/></span></div>';
			$(".addUrlInput").before(html);
		});
		$(".delUrlInput").live("click",function(){
			$(this).parent().remove();
		});
		$(".addUrl").live("click",function(){
			var iWidth = $(".product-img-view").width();
				var iHeight = $(".product-img-view").height();
				$.each($(".linkUrl"),function(k,v){
					$("#imagePlaceholder").remove();
					$(".uploadFile").before('<div class="product-img-view" onclick="removePicture(this)"><img src="'+$(v).val()+'" width="'+ iWidth +'" height="'+iHeight+'"/><input type="hidden" name="link[]" value="'+$(v).val()+'"/></div>');
					$("product-img-view").css("text-indent","0");
					if($(".product-img-view").length > 3){
						$("#height110").removeClass("height110");
					}
				});
				$("#addLinkPictureDialog").dialog("close");
				var html = '<div><div>URL:<input type="text" class="linkUrl"/><span class="delUrlInput"><img src="/images/minus_sign.gif" /></span></div><div class="addUrlInput"><img src="/images/plus_sign.gif"/><input type="button" value="Add" class="addUrl"/></div></div>'
				$("#addLinkPictureDialog").html(html);
		});
		<{if isset($links)}>
		<{foreach from=$links item=link}>
			var iWidth = $(".product-img-view").width();
			var iHeight = $(".product-img-view").height();
			$("#imagePlaceholder").remove();
			$(".uploadFile").before('<div class="product-img-view" onclick="removePicture(this)"><img src="<{$link}>" width="'+ iWidth +'" height="'+iHeight+'"/><input type="hidden" name="link[]" value="<{$link}>"/></div>');
			$("product-img-view").css("text-indent","0");
			if($(".product-img-view").length > 3){
				$("#height110").removeClass("height110");
			}
		<{/foreach}>
		<{/if}>
		<{if isset($pictures)}>
		<{foreach from=$pictures item=picture}>
			var iWidth = $(".product-img-view").width();
			var iHeight = $(".product-img-view").height();
			$("#imagePlaceholder").remove();
			$(".uploadFile").before('<div class="product-img-view" onclick="removePicture(this)"><img src="/merchant/product/view-image/fileName/<{$picture}>" width="'+ iWidth +'" height="'+iHeight+'"/><input type="hidden" name="picture[]" value="<{$picture}>"/></div>');
			$("product-img-view").css("text-indent","0");
			if($(".product-img-view").length > 3){
				$("#height110").removeClass("height110");
			}
		<{/foreach}>
		<{/if}>
	});
	
	function addOptionValue(obj,poc_id){
		 var html = $(obj).parent().parent().html();
		 var num = $(".qc_items>div").length;
   		 $(obj).parent("div").parent("div").after('<div class="row height25 add'+num+'">' + html + '</div>');
		 var objDiv = $(".add"+num+">div");
		 objDiv.eq(0).html('');
		 objDiv.last().html('<a href="javascript:void(0)" onclick="delOptionValue(this)"><img src="/images/ico-0.gif"/></a>');    	 
    
	}
	
	function delOptionValue(obj){
		$(obj).parent('div').parent('div').remove();
	}
	
	function batchAddProduct(){
		$(".batchAddTips").html("");
		$('#batchAdd').dialog('open');
	}
    
     function showDiv(id){
        if('cp_li'==id){
            $('#create_one_product').css('display','block');
            $('#create_batch_products').css('display','none');
        }else if('up_li'==id){
            $('#create_one_product').css('display','none');
            $('#create_batch_products').css('display','block');
        }
    }
    
    function uploadProducts(){
        if($('[name=productFile]').val()==""){
            $("#batchAddTips").html("File can't be empty, Please select correct file!");
		}else{
			$("#uploadForm").submit();							
		}
    }

	function showinput(obj){
	   if(obj.checked){ 
	   		$('.opvalueClass'+obj.id).attr('readonly',false).css({"border":"1px solid #CCCCCC","background":"white"});
			$('.aClass'+obj.id).css('display','block');
	   }else{ 
	   		$('.opvalueClass'+obj.id).attr('readonly',true).css({"border":"none","background":"none"});
	   		$('.aClass'+obj.id).css('display','none');
	   }
	}
	
	function productCheck(){
		$("#createForm").validate({
			rules:{
				productNumber:{
					remote:{
						url:"/merchant/product/validate-sku"
					}
				}
			},
			errorPlacement:function(error, element){
				$("<img src=\'/images/error.jpg\'>").prependTo(error);
				element.parent().parent().children(".right").html(error); 
				flag = false;
			},
			success:function(label){
				label.parent().parent().children(".right").html("<img src='/images/yes.gif'>");
			}
		});
		
		var ck = $('[name=product_is_qc]').attr('checked') ? true : false;
		if(ck){
			var len = $('.pocidCheckbox:checked').length;
			var html = '';
			if(len==0){ 
				html+='Please select at least one when you choose need quality inspecion !';
				$("#qcItemCheck").html(html);
				$("#qcItemCheck").dialog('open');
				return false;
			}else{
				var temp = 0;
				$.each($('.pocidCheckbox:checked'),function(){
					$.each($('.opvalueClass'+this.id),function(){
						if($(this).val()=='') temp++;	
					});
				});
				if(temp!=0){
				  html+= 'The QC selected options\'s option value can\'t be empty !';
				  $("#qcItemCheck").html(html);
				  $("#qcItemCheck").dialog('open');
				  return false;
				}
			} 	
		}else{
			var len = $('.pocidCheckbox:checked').length;
			if(len>0){
			var html = '';var temp = 0;
			$.each($('.pocidCheckbox:checked'),function(){
				$.each($('.opvalueClass'+this.id),function(){
				    if($(this).val()=='') temp++;	
				});	
			});
			if(temp!=0){
				html+= 'The QC selected options\'s option value can\'t be empty !';
				$("#qcItemCheck").html(html);
				$("#qcItemCheck").dialog('open');
				return false;
			}
			}	
		}
		
		var formData = $('#createForm').serialize();
		$.ajax({
		type: "POST",
		async: false,
		dataType: "json",
		url: "/merchant/product/create",
		data:formData,
		success: function(json) {
			var html ="";
            if(json.ask){
                var html ='<p class="alertMsg"><img src="/images/yes.gif">'+json.message+'</p>';
				$('#messageSuccessDiv').html(html);
				$('#messageSuccessDiv').dialog("open");
            }else{	                
				$.each(json.message,function(k,i){
					html += '<p class="alertMsg"><img src="/images/no.gif">'+i+'</p>';
				});
                $('#messageDiv').html(html);
				$('#messageDiv').dialog("open");
            }
		}
	});
	}
</script>
<div class="position"><a href='/default/index'><{$languages['HOME']}></a> &gt; <a href='/merchant/my-account'><{$languages['MERCHANT_CENTER']}></a>  &gt; <{$languages['OPERATION']}> &gt; <{$languages['CREATE_PRODUCT']}></div>

<div style="margin-top:10px;" class="right-menu"><ul><li onclick="showDiv('cp_li')"><{$languages['CREATE_PRODUCT']}></li><li onclick="showDiv('up_li')"><{$languages['UPLOAD_PRODUCTS']}></li></ul></div>
<div id="create_one_product">
<h4>Create Product</h4>
<ul class="userinfo">
	<p class="bold"><{$languages['CREATE_THE_ONLY_PRODUCT_SKU']}></p>
        <div class="tab-div">
		<form id="createForm" method="post" action="">
			<{foreach from=$selectOptions item=selectOption}>
				<{if $selectOption.id != 4}>
				<div class="row height26">
					<div class="left"><{$selectOption['name']}>：</div>
					<div class="middle">
					<{if $selectOption.po_choose_type == 0}>
						<select id="" value="" name="autoGenerate_<{$selectOption.id}>" style="width:200px" class=" <{if $selectOption.required == 1}><{$languages['REQUIRED']}><{/if}>">
							<option value=""><{$languages['PLS_SELECT']}></option>
							<{foreach from=$selectOption['options'] item=option}>
								<option value="<{$option['poc_id']}>" <{if isset($productOptionValues) && $productOptionValues[$selectOption.id]['poc_id'] == $option['poc_id']}>selected<{/if}>>
                            <{if $languages['LANGUAGEID']=='1'}>
                            <{$option['poc_value']}>
                            <{else}>
                                <{$option['poc_value_cn']}>
                             <{/if}>
                            </option>

							<{/foreach}>
						</select>
					<{else}>
						<input type="text" id=""  value="" name="autoGenerate_<{$selectOption.id}>" class="input-width-2 "/>
					<{/if}>
					<{if $selectOption.required == 1}><span class="red">&nbsp;&nbsp;*</span><{/if}>
					</div>
					<div class="right"><{$selectOption['desc']}></div>
				</div>
                <{/if}>
			<{/foreach}>
		
			<div class="row height30">
				<div class="left"><{$languages['SKUNAME']}>：</div><div class="middle"><input type="text" class="input-width-2 required" name="productName" value="<{if isset($row.product_title)}><{$row.product_title}><{/if}>"/><span class="red">&nbsp;&nbsp;*</span></div><div class="right"><{$languages['REQUIRED']}></div>
			</div>
            
            <div class="row height30">
				<div class="left"><{$languages['CHINESENAME']}>：</div><div class="middle"><input type="text" class="input-width-2" name="productCname" value="<{if isset($row.product_title_cn)}><{$row.product_title_cn}><{/if}>"/></div><div class="right"><{$languages['REQUIRED']}></div>
			</div>
            
			<div class="row height30">
				<div class="left">SKU：</div><div class="middle"><input type="text" class="input-width-2 required" name="productNumber" value="<{if isset($row.product_sku)}><{$row.product_sku}><{/if}>"/><span class="red">&nbsp;&nbsp;*</span></div><div class="right"><{$languages['PLEASE_BEGIN_WITH_A_LETTER_OR_UNDERSCORE']}></div>
			</div>
			<div class="row height30">
				<div class="left"><{$languages['WEIGHT']}>：</div><div class="middle"><input type="text" class="input-width-2 required number" name="weight" value="<{if isset($row.product_weight)}><{$row.product_weight}><{/if}>"/>&nbsp;kg<span class="red">&nbsp;&nbsp;*</span></div><div class="right"><{$languages['MUST_BE_NUMERIC']}></div>
			</div>
			<div class="row height30">
				<div class="left"><{$languages['VOLUME']}>：</div><div class="middle">Length&nbsp;<input type="text" class="input-width-4 required number" name="lenght" value="<{if isset($row.product_length)}><{$row.product_length}><{/if}>"/>&nbsp;Width&nbsp;<input type="text" class="input-width-4 required number"  name="width" value="<{if isset($row.product_width)}><{$row.product_width}><{/if}>"/>&nbsp;Height&nbsp;<input type="text" class="input-width-4 required number" value="<{if isset($row.product_height)}><{$row.product_height}><{/if}>"  name="height"/>&nbsp;cm<span class="red">&nbsp;&nbsp;*</span></div><div class="right"><{$languages['MUST_BE_NUMERIC']}></div>
			</div>
			<div class="row height30">
				<div class="left"><{$languages['DECLARE_VALUE']}>：</div><div class="middle"><input type="text" class="input-width-2 required number"  style="width:240px" name="declareWorth" value="<{if isset($row.product_height)}><{$row.product_declared_value}><{/if}>"/>&nbsp;RMB<span class="red">&nbsp;&nbsp;*</span></div><div class="right"><{$languages['MUST_BE_NUMERIC']}></div>
			</div>					

            
			<div class="row ">
				<div class="left"><{$languages['IMAGES']}>：</div><div class="middle500">
					<div class="product-img-view" id="imagePlaceholder">
                        No Image
                        </div>
						 <span class="button-2 uploadFile"><{$languages['LOCAL_IMAGE']}></span><br />
						 <span class="button-2 addLinkPicture"><{$languages['WEB_IMAGE']}></span><br />
				</div>
			</div>
			<div class="row height30" style="border-bottom: none;">
				<div class="left">&nbsp;</div>
				<div class="middle text-middle"><span class="button-2" onclick="productCheck()">Submit</span>
                <span class="red">&nbsp;&nbsp;</span></div><div class="right">&nbsp;</div>
			</div>
			</form>
		</div>
</ul>
</div>

<div id="create_batch_products" style="display:none;">
<h4>上传您的产品</h4>
<div style="padding:10px; font-size:15px; font-weight:bold;">
    <form id="uploadForm" method="post" action="/merchant/product/upload-processing"  enctype="multipart/form-data">
        <p><input type="file" name="productFile"><span style="margin-left:10px;color:red;" id="batchAddTips"></span></p>
        <p><img src="/images/download3161.png" style="width:25px;">Download template:</p>
       <a style="text-decoration:underline;" href="/merchant/product/download-file/dlfile/xls" >Products/xls</a> | <a style="text-decoration:underline;" href="/merchant/product/download-file/dlfile/csv" >Products/csv</a>
        <p><button type="button" class="mybtn" onclick="uploadProducts()">
           <span  class='myspan'>Confirm</span>
        </button>
        </p>
        
    </form>
</div>
</div>

<div id="uploadFileDialog" style="display:none" title="images upload">
	<div id="fileQueue"></div>
	<input type="file" id="uploadify" class="half" value="" name="uploadify"/>
</div>
<div id="addLinkPictureDialog" style="display:none" title="Add picture"></div>

<div id="qcItemCheck" style="display:none;" title="Tip"></div>

<div id="messageDiv" style="display:none;" title="Tip"></div>

<div id="messageSuccessDiv" style="display:none;" title="Tip"></div>
